<!DOCTYPE html>
<html>
{include file='public/header'}
<style>
    .box{
        position: relative;
    }
    .box #EchartCurve{
        margin-top: 20px;
    }
    .layui-form {
        position: absolute;
        z-index: 1;
        left: 100px;
        top: -5px;
    }
    /* .layui-col-md2{
        width: 20%!important;
    } */
</style>

<body>
    <div class="x-body layui-anim layui-anim-up">
        <blockquote class="layui-elem-quote">欢迎用户：
            <span class="x-red" id="username">
                <?php echo session('user_name')?>
            </span>
            ！当前时间:
            <span id="time"></span>
        </blockquote>
<!--        <fieldset class="layui-elem-field">-->
<!--            <legend>数据统计</legend>-->
<!--            <div class="layui-col-md22">-->
<!--                <div class="layui-card">-->
<!--                    <div class="layui-card-body">-->
<!--                        <div class="layui-carousel x-admin-carousel x-admin-backlog" style="width: 100%">-->
<!--                            <ul class="layui-row layui-col-space10 layui-this">-->
<!--                                <li class="layui-col-md2 layui-col-xs3 layui-col-sm6">-->
<!--                                    <a href="javascript:;" class="x-admin-backlog-body">-->
<!--                                        <h3>视频总数</h3>-->
<!--                                        <p><cite id="video_total">0</cite></p>-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                                <li class="layui-col-md2 layui-col-xs3 layui-col-sm6">-->
<!--                                    <a href="javascript:;" class="x-admin-backlog-body">-->
<!--                                        <h3>今日新增用户数</h3>-->
<!--                                        <p><cite id="today_new_user">0</cite></p>-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                                <li class="layui-col-md2 layui-col-xs3 layui-col-sm6">-->
<!--                                    <a href="javascript:;" class="x-admin-backlog-body">-->
<!--                                        <h3>本月新增用户数</h3>-->
<!--                                        <p><cite id="this_month_new_user">0</cite></p>-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                                <li class="layui-col-md2 layui-col-xs3 layui-col-sm6">-->
<!--                                    <a href="javascript:;" class="x-admin-backlog-body">-->
<!--                                        <h3>会员数</h3>-->
<!--                                        <p><cite id="member_total">0</cite></p>-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                                <li class="layui-col-md2 layui-col-xs3 layui-col-sm6">-->
<!--                                    <a href="javascript:;" class="x-admin-backlog-body">-->
<!--                                        <h3>本月(不含当日)</h3>-->
<!--                                        <p><cite id="this_month_recharge_amount">0</cite></p>-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                                <li class="layui-col-md2 layui-col-xs3 layui-col-sm6">-->
<!--                                    <a href="javascript:;" class="x-admin-backlog-body">-->
<!--                                        <h3>累计(不含当日)</h3>-->
<!--                                        <p><cite id="accumulated_recharge_amount">0</cite></p>-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                                <li class="layui-col-md3 layui-col-xs3 layui-col-sm6">-->
<!--                                    <a href="javascript:;" class="x-admin-backlog-body">-->
<!--                                        <h3>今日充值</h3>-->
<!--                                        <p><cite id="today_recharge_amount">0</cite></p>-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                                <li class="layui-col-md3 layui-col-xs3 layui-col-sm6">-->
<!--                                    <a href="javascript:;" class="x-admin-backlog-body">-->
<!--                                        <h3>今日新用户充值</h3>-->
<!--                                        <p>-->
<!--                                            <cite id="to_day_new_user_recharge_amount">0</cite>-->
<!--                                            (已支付:<span id="today_paid_recharge">0</span>笔-->
<!--                                            未支付:<span id="today_unpaid_recharge">0</span>笔-->
<!--                                            完成率:<span id="today_recharge_rate">0</span>)-->
<!--                                        </p>-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                                <li class="layui-col-md3 layui-col-xs3 layui-col-sm6">-->
<!--                                    <a href="javascript:;" class="x-admin-backlog-body">-->
<!--                                        <h3>昨日充值</h3>-->
<!--                                        <p><cite id="yesterday_recharge_amount">0</cite>-->
<!--                                        </p>-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                                <li class="layui-col-md3 layui-col-xs3 layui-col-sm6">-->
<!--                                    <a href="javascript:;" class="x-admin-backlog-body">-->
<!--                                        <h3>昨日新用户充值</h3>-->
<!--                                        <p>-->
<!--                                            <cite id="yesterday_new_user_recharge_amount">0</cite>-->
<!--                                            (已支付:<span id="yesterday_new_user_paid_recharge">0</span>笔-->
<!--                                            未支付:<span id="yesterday_new_user_unpaid_recharge">0</span>笔-->
<!--                                            完成率:<span id="yesterday_new_user_recharge_rate">0</span>)-->
<!--                                        </p>-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </fieldset>-->

<!--        <div class="box">-->
<!--            <form class="layui-form" style="display: flex;">-->
<!--                <div class="layui-inline" id="time" style="display: flex;align-items: center;">-->
<!--                    <div class="layui-input-inline" style="margin-right:10px">-->
<!--                        <input type="text" autocomplete="off" name="start_date" id="start_date" class="layui-input"-->
<!--                            placeholder="开始日期">-->
<!--                    </div>-->
<!--                    <div class="layui-form-mid">-</div>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <input type="text" autocomplete="off" name="end_date" id="end_date" class="layui-input"-->
<!--                            placeholder="结束日期">-->
<!--                    </div>-->
<!--                </div>-->
<!--                <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchEcharts">查询</button>-->
<!--                <button type="reset" id="resetEcharts" class="layui-btn layui-btn-primary">重置</button>-->
<!--            </form>-->
<!--            <div id="EchartCurve" style="width: 100%;height: 530px;"></div>-->
<!--        </div>-->

    </div>

    <script>
        // 数据统计
        Ajax('/admin/index/data', {}).then(data => {
            var keys = Object.keys(data.data);
            for (var i = 0; i < keys.length; i++) {
                $(`#${keys[i]}`).html(data.data[keys[i]])
            }
        });

        // 当前时间
        setInterval(function () {
            $('#time').html(dayjsFormat(new Date().getTime() / 1000))
        }, 1000)

        // 时间范围
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //日期范围
            laydate.render({
                elem: '#time'
                , range: ['#start_date', '#end_date']
                , format: 'yyyy-MM-dd'
            });
        })

        // echarts图表
        var EchartCurve = echarts.init(document.getElementById('EchartCurve'));

        curve()
        function curve(params) {
            Ajax('/admin/index/curve', params).then(data => {
                //指定图表配置项和数据
                var optionchart = {
                    title: {
                        text: '数据分析'
                    },
                    tooltip: {},
                    legend: { //顶部显示 与series中的数据类型的name一致
                        data: ['充值金额']
                    },
                    xAxis: {
                        // type: 'category',
                        // boundaryGap: false, //从起点开始
                        data: Object.keys(data.data),
                        axisLabel:{
                            rotate:45
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '充值金额',
                        type: 'line', //线性
                        data: Object.values(data.data),
                        itemStyle: {
                            normal: {
                                color: '#009688',
                                lineStyle: {
                                    color: '#009688'
                                }
                            }
                        },
                    }],
                    grid: [{
                        bottom: '12%',
                        top: '20%',
                        left: '3%',
                        right: '3%',
                    }]
                };
                EchartCurve.setOption(optionchart, true);    // 折线图
            });
        }

        // 搜索
        layui.use(['table', "form", "layer"], function () {
            var table = layui.table
            form = layui.form,
                layer = layui.layer;

            form.on('submit(searchEcharts)', function (data) {
                curve(data.field)
                return false
            });
            $('#resetEcharts').on('click', function () {
                curve()
            });
        });

        // 窗口改变 更新图表
        window.addEventListener("resize", function () {
            EchartCurve.resize();
        });

    </script>

</body>

</html>